<template>
  <div class="home">
    <!-- 轮播 -->
    <banner type="1" />
    <!-- 专辑 -->
    <div class="album-box center">
      <div class="title-box">
        <h1>
          <router-link to="/album">发现灵感 (专辑)</router-link>
        </h1>
        <p>精选国内外优质正版视觉素材每日推荐</p>
      </div>
      <album class="album" :album_list="album_list" />
      <el-button class="album-btn" plain round>更多</el-button>
    </div>
    <!-- 超值VIP -->
    <div class="center">
      <div class="title-box">
        <h1>
          <router-link to="/packageImg">超值VIP</router-link>
        </h1>
        <p>正版素材，全球通用</p>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="摄影图" name="first">
          <img-text :photo_list="photo_list"></img-text>
        </el-tab-pane>
        <el-tab-pane label="矢量图" name="second">
          <img-text :photo_list="photo_list"></img-text>
        </el-tab-pane>
      </el-tabs>
      <el-button class="more-btn" plain round>更多</el-button>
    </div>
    <!-- 高端优选PLUS -->
    <div class="high-select center">
      <div class="title-box">
        <h1>
          <router-link to="/packageImg">高端优选PLUS</router-link>
        </h1>
      </div>
      <gallery-layout :photo_list="high_list"></gallery-layout>
      <el-button class="more-btn" plain round>更多</el-button>
    </div>
    <!-- 底部 -->
    <footer-layout></footer-layout>
  </div>
</template>

<script>
import Banner from "@/components/common/Banner";
import GalleryLayout from "@/components/common/GalleryLayout";
import FooterLayout from "@/components/common/FooterLayout";
import Album from "@/components/home/Album";
import ImgText from "@/components/home/ImgText";

import { get_album } from "@/api/album";
import { get_photo } from "@/api/photo";

export default {
  name: "Home",
  data() {
    return {
      // 专辑
      album_list: [],
      activeName: "first",
      // 摄影图
      photo_list: [],
      // 高端优选
      high_list: [],
      num: 8,
    };
  },
  components: {
    Banner,
    Album,
    ImgText,
    GalleryLayout,
    FooterLayout,
  },
  async created() {
    let res_album = await get_album();
    // 专辑
    this.album_list = res_album.data.data.map((el) => {
      return {
        id: el.id,
        album_name: el.album_name,
        num: el.num,
        info_obj: JSON.parse(el.info_obj),
        follow_num: el.follow_num,
      };
    });
    // 超值VIP
    this.handleClick();
    // 高端优选
    let res_photo = await get_photo(0);
    this.high_list = res_photo.data.data.photo_list.map((el) => {
      return {
        id: el.photo_id,
        src: el.thumb_w_url_cos,
        loading: true,
        error: false,
        ratio: el.origin_w / el.origin_h,
      };
    });
  },
  methods: {
    async handleClick() {
      let type = 1;
      if (this.activeName == "first") {
        type = 1;
      } else {
        type = 2;
      }
      let res_photo = await get_photo(type);
      this.photo_list = res_photo.data.data.photo_list.slice(0, this.num);
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  background-color: $mainBgColor;
  overflow: hidden;
  .title-box {
    padding: 10px 0;
    h1 {
      color: #000;
      font-size: 20px;
      line-height: 1.5;
    }
    p {
      font-size: 13px;
      color: #c3cbc9;
    }
  }
  // 专辑
  .album-box {
    margin-top: 60px;
    .album {
      margin-top: 50px;
    }
  }
}
.el-button {
  display: block;
  margin: 40px auto;
}
::v-deep {
  .el-tabs__item:hover {
    color: $mainColor;
  }
  .el-tabs__item.is-active {
    color: $mainColor;
  }
  .el-tabs__active-bar {
    background-color: $mainColor;
  }
  .el-tabs__item {
    font-size: 16px;
  }
}
</style>
